<script setup lang="ts">
import selects from "@/components/common/selects.vue";
import uploadFile from "@/components/common/uploadFile.vue";
import { ref } from "@vue/reactivity";
type Props = {
  step?: number;
};
let props = withDefaults(defineProps<Props>(), {
  step: 0,
});
const emits = defineEmits<{
  (e: "update:step", value: number): void;
}>();

let complaintList = [
  "融资问题",
  "生产成本问题",
  "项目用地问题",
  "减税降费问题",
  "承诺兑现问题",
  "施欠款项问题",
  "政商关系问题",
  "其它问题",
];

let industryList = [
  "机构组织",
  "农林牧鱼",
  "医疗卫生",
  "建筑建材",
  "冶金矿产",
  "水利水电",
  "石油化工",
  "交通运输",
  "其它类别",
];
let types = ref("");

// 行业类型
let complaintTxt = ref("");
// 投诉类型
let industryTxt = ref("");

// 修改行业类型
let changeComplaintTxt = (v: string) => {
  complaintTxt.value = v;
};

// 修改投诉类型
let changeIndustryTxt = (v: string) => {
  industryTxt.value = v;
};
</script>

<template>
  <form id="form" method="post" action="/" novalidate>
    <!-- 投诉标题 -->
    <label class="title" for="title">
      <span class="require">*</span>&nbsp;投诉标题：
      <input
        id="title"
        type="text"
        placeholder="请输入"
        autocomplete="on"
        name="title"
      />
    </label>

    <!-- 投诉类型 -->
    <selects
      :list="complaintList"
      title="投诉类型："
      :value="complaintTxt"
      @changeValue="changeComplaintTxt"
    />

    <!-- 行业类别： -->
    <selects
      :list="industryList"
      title="行业类别："
      :value="industryTxt"
      @changeValue="changeIndustryTxt"
    />

    <!-- 投诉内容 -->
    <label class="content" for="content" style="height: 108px">
      <!-- 嵌套多一层div主要是设置标题跟顶部的距离 -->
      <div style="margin-top: 10px; align-self: flex-start">
        <span class="require">*</span>&nbsp;投诉内容：
      </div>
      <textarea
        name="content"
        placeholder="请输入"
        id="content"
        cols="30"
        rows="10"
      ></textarea>
    </label>

    <!-- 上传资料 -->
    <uploadFile />

    <!-- 上一步、提交 -->
    <label class="btns">
      <input type="button" value="上一步" @click="emits('update:step', 0)" />
      <input
        type="button"
        class="submit"
        value="提交"
        @click="emits('update:step', 2)"
      />
    </label>
  </form>
</template>

<style scoped lang="scss">
#form {
  margin-top: 50px;
  @include flexColumnCenter;
  gap: 16px 0px;
}

.title,
.types,
.content {
  height: 36px;
  display: flex;
  align-items: center;
  color: #333333;
  cursor: pointer;
  position: relative;

  > input {
    width: 480px;
    height: 100%;
    padding-left: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    outline: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

.select {
  width: 480px;
  position: absolute;
  right: 0;
  top: 45px;
  z-index: 1;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  > li {
    width: 100%;
    height: 36px;
    @include flexCenter;
    padding-left: 20px;
    color: #606266;
    position: relative;
    z-index: 10;
    transition: all 0.5s;
    background-color: #fff;
    overflow: hidden;
    &:hover {
      background-color: #f5f7fa;
    }
  }
  > li:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
  > li:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &::before {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    transform: rotate(45deg) translateX(-51%);
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
  // 选中的文本颜色
  .selectTypes {
    color: #409eff !important;
  }
}

// 文本域的内容
textarea {
  width: 480px;
  height: 100%;
  color: #606266;
  border-radius: 4px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  /* 防止拖拽文本域 */
  resize: none;
  /* 取消轮廓线 */
  outline: none;
  //  对于块级元素是无效的，只针对行内元素和行内块元素(input,img,textarea)
  //  主要是控制图片/表单与文字的对齐
  vertical-align: middle;
}

// 上一步、提交
.btns {
  display: flex;
  gap: 0px 8px;
  > input {
    width: 232px;
    height: 36px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #2163e0;
    color: #2163e0;
    font-size: 14px;
    cursor: pointer;
  }
  > .submit {
    background: #2163e0;
    color: #fff;
  }
}
</style>
